@charset "utf-8";


/* =全局CSS
------------------------------------------------------------ */

html,body{ height:100%; width:100%; position: relative; overflow:hidden; -webkit-tap-highlight-color:rgba(0,0,0,0); }

.con_wrap{ position:relative; overflow:hidden;display:block; width:100%; height:100%;  }

/*开始页*/


@-webkit-keyframes a_opacity{
	0%{ opacity:0; }
	100%{ opacity:1; }
}
@keyframes a_opacity{
	0%{ opacity:0; }
	100%{ opacity:1; }
}

@-webkit-keyframes a_dialog_qr_show{
	0%{ transform:scale(0.1); -webkit-transform:scale(0.1); opacity:0;}
	100%{ transform:scale(1); -webkit-transform:scale(1); opacity:1;}
}
@keyframes a_dialog_qr_show{
	0%{ transform:scale(0.1); -webkit-transform:scale(0.1); opacity:0;}
	100%{ transform:scale(1); -webkit-transform:scale(1); opacity:1;}
}



.main{ overflow:hidden; height:100%; min-width:320px; max-width:640px; margin:0 auto; background:#08246c;  }





.btn_start{ position:absolute; top:-50px; color:#FFFFFF;}

.stms_right{ width:100%; height:100%; overflow:hidden;  position:relative; background:rgba(255,0,4,0.11)}




.fot_gold{ overflow:hidden;position: absolute; bottom: 0; background:rgba(30,30,30,.8); width:100%; margin:0 auto;height:40px; padding:10px 0 5px; text-align:center;}
.fot_gold li{ margin:0 10px; width:40px; height:40px; display:inline-block; text-align:center; }
.fot_gold .success{background:url(../images/gold1.png) no-repeat; background-size:contain;}
.fot_gold .gold_offset{ display:block; width:1px; height:1px; background:rgba(0,0,0,0.00); margin:0 auto; background:red; width:10px; height:10px; position:relative; left:0; top:;}

.game_tips{   position:absolute;  bottom:20px; width:86%; left:50%; margin-left:-44%; border-radius:20px; background:#ff8900; overflow:hidden; font-size:18px; color:#fff; font-weight:bold; line-height:36px; display:none; opacity:1;  text-align:center;}
.num_total{ color:#fff;  padding:10px 0; color:#f8f421; }



.game_alert{ width:100%; height:100%; position:fixed; left:0; top:0; z-index:9998; display:none;}
.game_alert .in{width:280px; height:250px;margin-left:-140px; margin-top:-125px; border-radius:10px; border:1px solid #fff; position:absolute; z-index:9999; left:50%; top:50%;  overflow:hidden; background:#fff;}
.game_alert .title{ height:50px; line-height:50px; font-size:22px;  text-align:center;background: linear-gradient(to right, #2340fc , #117bff); color:#fff;display:block; }
.game_alert .content{ color:#404040; font-size:16px; line-height:30px; padding-top:50px; text-align:center;  position:relative;}
.game_alert .ok{ display:block; position:absolute; left:50%; bottom:10px; left:50%; margin-left:-100px; width:200px; height:40px;line-height:40px;cursor:pointer; background:#f59c28; border-radius:10px; color:#fff; text-align:center; font-size:18px; cursor:pointer;}
.game_alert .content span{display:inline-block;}






.big_gold{ position:absolute; left:50%; top:200px; z-index:999; margin-left:-100px; width:200px; height:200px; display:none;}


.game_level,.game_score{ overflow:hidden; font-size:16px;  position:absolute; top:10px;  border: 1px solid #1970c0; border-radius: 20px;background: #fff;box-shadow: 3px 3px 3px #242424; color: #1970c0; padding:0 14px; line-height:26px;}
.game_level{ left:10px;}
.game_score{ left:140px;}
.game_level_curr,.game_score_curr{ color:#ff8105;}

.user_exit{ width:30px; height:30px; background:url(../images/close.png); background-size:contain; position:absolute; right:10px; top:6px;}






.popads{ text-align:center; overflow:hidden;width:100%;  display:table-cell;vertical-align:middle; position:relative; z-index:999999;}
.popads img{ text-align:center; width:100%; }
.pro_link{ position:absolute;  display:block; width:30%; height:10%; left:16.87%; bottom:2%; background:url(../images/stms/ad_swt.gif) no-repeat center; background-size:contain;}
.pro_ok{ position:absolute; display:block;width:30%; height:10%; left:55.31%;bottom:2%; background:url(../images/stms/ad_btn.gif) no-repeat center; background-size:contain;  transition:all .3s linear;}

#ad0{background: linear-gradient(#cbf4fa 50%, #9dd848 50%);}
#ad1{background: linear-gradient(#7eb939 50%, #9de05c 50%);}
#ad2{background: linear-gradient(#7dc94f 50%, #5a9fa6 50%);}
#ad3{background: linear-gradient(#d6efea 50%, #e1f3ef 50%);}
#ad4{background: linear-gradient(#daefd0 50%, #49cd9e 50%);}
#ad5{background: linear-gradient(#bcecfe 50%, #c0e14b 50%);}
#ad6{background: linear-gradient(#47a2e9 50%, #0638a7 50%);}



#ad0 .pro_link{ width:100%; height:14%; left:0;  bottom:6%;  background:url(../images/stms/ad0_swt.gif) no-repeat center; background-size:86.25%;}
#ad0 .pro_ok{ width:50%; height:10%; left:50%; margin-left:-25%; bottom:26%; background:url(../images/stms/ad0_btn.png) no-repeat center; background-size:contain;animation:mymove 1s infinite; }

#ad1 .pro_link{ display:none;}
#ad1 .pro_ok{ width:53.43%; height:10.6%; left:50%; margin-left:-26.71%; bottom:4.5%; background:url(../images/stms/ad1_btn.gif) no-repeat center; background-size:contain; animation:mymove 1s infinite;}

#ad2 .pro_link{ width:100%; height:25.53%; left:0;  bottom:22.8%;   background:url(../images/stms/ad2_swt.gif) no-repeat center center; background-size:89.06%;}
#ad2 .pro_ok{ width:28.59%; height:19.58%; left:50%; margin-left:-14.29%; bottom:1%; background:url(../images/stms/ad2_btn.gif) no-repeat center; background-size:contain; animation:mymove 1s infinite;}




@keyframes mymove{
	0%{ transform:scale(0.9)}
	50%{ transform:scale(1)}
	100%{ transform:scale(0.9)}
		
}



/*开始页*/


.game_area{ display:block; margin:0 auto;}
.game_item_wrap{ display:block; height:100%; width:100%;z-index:1; opacity:0; position:relative;}
.game_area .penguin_item_hook{ display:block; height:104px; width:104px; position:absolute;-webkit-transform-origin:0% 0%; transform-origin:0% 0%; cursor:pointer;}
.game_area .penguin_item{ display:block; height:104px; width:104px; border-radius:52px; position:absolute; left:0px; top:0x; opacity:0; -webkit-transform-style:preserve-3d;transform-style:preserve-3d;}
.game_area .penguin_item .normal{ display:block; height:100px; width:100px; background:#fff; border-radius:50px; background:url(../images/stms/bg_ico.png) no-repeat; background-size:contain;  position:absolute; left:0px; top:0px; backface-visibility:hidden;}
.game_area .penguin_item .front{ display:block; height:104px; width:104px; background:#000; border-radius:52px; position:absolute; left:0px; top:0px; -webkit-transform:rotateY(180deg) scale(0.95);transform:rotateY(180deg) scale(0.95);backface-visibility:hidden;background:url(../images/stms/front_bg.png) no-repeat; background-size:contain;}
.game_area .penguin_item .wrong{ display:block; height:104px; width:104px;position:absolute; left:0px; top:0px;-webkit-transform:rotateY(180deg) scale(0.95); transform:rotateY(180deg) scale(0.95);  backface-visibility:hidden;  background:url(../images/stms/wrong_cross.png) no-repeat; background-size:contain;}
/*.game_area .penguin_item .wrong .cross{ display:block; width:100%; height:100%; margin:0 auto; position:relative;  background:url(../images/stms/wrong_cross.png) no-repeat; background-size:contain;}
*/




.game_area_show{ opacity:1; width:100%; height:100%;} 



.game_area_show .game_area{  /*height:600px; */position:relative; top:60px; left:50%; margin-left:-200px; -webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;} /*展示区的大小*/
.game_area_show .game_item_wrap{-webkit-animation:a_opacity 0.1s 0.2s linear both;   animation:a_opacity 0.1s 0.2s linear both;}

.game_area_show .game_item_wrap .flip_out .normal{-webkit-animation:a_flip 0.3s ease-in-out both;animation:a_flip 0.3s ease-in-out both; }
.game_area_show .game_item_wrap .flip_out .front{-webkit-animation:a_flip_2 0.3s ease-in-out both; animation:a_flip_2 0.3s ease-in-out both;}
.game_area_show .game_item_wrap .flip_out .wrong{ -webkit-animation:a_flip_2 0.3s ease-in-out both; animation:a_flip_2 0.3s ease-in-out both;}

.game_area_show .game_item_wrap .close_up .normal{ -webkit-animation:a_flip_2 0.3s ease-in-out both;animation:a_flip_2 0.3s ease-in-out both;}
.game_area_show .game_item_wrap .close_up .front{-webkit-animation:a_flip 0.3s ease-in-out both;animation:a_flip 0.3s ease-in-out both;  }
.game_area_show .game_item_wrap .close_up .wrong{ -webkit-animation:a_flip 0.3s ease-in-out both;animation:a_flip 0.3s ease-in-out both; }










@-webkit-keyframes a_flip{
	0%{-webkit-transform: rotateY(0deg) scale(1); transform: rotateY(0deg) scale(1); opacity:1; }
	/*36%{ transform: rotateY(90deg); opacity:0; }让该面隐藏，否则翻转的时候会出现重叠*/
	40%{ -webkit-transform: rotateY(90deg) scale(0.95); transform: rotateY(90deg) scale(0.95);opacity:0; }
	80%{-webkit-transform: rotateY(200deg) scale(0.95);transform: rotateY(200deg) scale(0.95); opacity:0; }
	90%{-webkit-transform: rotateY(170deg) scale(0.95); transform: rotateY(170deg) scale(0.95);opacity:0; }
	100%{-webkit-transform: rotateY(180deg) scale(0.95); transform: rotateY(180deg) scale(0.95); opacity:0; }
}
@keyframes a_flip{
	0%{-webkit-transform: rotateY(0deg) scale(1); transform: rotateY(0deg) scale(1); opacity:1; }
	/*36%{ transform: rotateY(90deg); opacity:0; }让该面隐藏，否则翻转的时候会出现重叠*/
	40%{ -webkit-transform: rotateY(90deg) scale(0.95);   transform: rotateY(90deg) scale(0.95);opacity:0; }
	80%{-webkit-transform: rotateY(200deg) scale(0.95); transform: rotateY(200deg) scale(0.95); opacity:0; }
	90%{-webkit-transform: rotateY(170deg) scale(0.95);  transform: rotateY(170deg) scale(0.95);opacity:0; }
	100%{-webkit-transform: rotateY(180deg) scale(0.95);transform: rotateY(180deg) scale(0.95); opacity:0; }
}


@-webkit-keyframes a_flip_2{
	0%{ -webkit-transform: rotateY(180deg) scale(0.95); transform: rotateY(180deg) scale(0.95);opacity:0; }
	/*36%{ transform: rotateY(90deg); opacity:1; }让该面显示，否则翻转的时候会出现重叠*/
	40%{-webkit-transform: rotateY(90deg) scale(1); transform: rotateY(90deg) scale(1);opacity:1; }
	80%{-webkit-transform: rotateY(-20deg) scale(1);transform: rotateY(-20deg) scale(1); opacity:1; }
	90%{-webkit-transform: rotateY(10deg) scale(1); transform: rotateY(10deg) scale(1);opacity:1; }
	100%{-webkit-transform: rotateY(0deg) scale(1); transform: rotateY(0deg) scale(1);opacity:1; }
}
@keyframes a_flip_2{
	0%{-webkit-transform: rotateY(180deg) scale(0.95);  transform: rotateY(180deg) scale(0.95);opacity:0; }
	/*36%{ transform: rotateY(90deg); opacity:1; }让该面显示，否则翻转的时候会出现重叠*/
	40%{-webkit-transform: rotateY(90deg) scale(1);  transform: rotateY(90deg) scale(1);opacity:1; }
	80%{-webkit-transform: rotateY(-20deg) scale(1);transform: rotateY(-20deg) scale(1); opacity:1; }
	90%{-webkit-transform: rotateY(10deg) scale(1); transform: rotateY(10deg) scale(1);opacity:1; }
	100%{-webkit-transform: rotateY(0deg) scale(1);  transform: rotateY(0deg) scale(1);opacity:1; }
}


@-webkit-keyframes a_game_item_show{
	0%{ opacity:0;-webkit-transform:scale(0.1);transform:scale(0.1); }
	5%{ opacity:1; -webkit-transform:scale(0.1);transform:scale(0.1); }
	60%{ opacity:1;-webkit-transform:scale(1.05); transform:scale(1.05);}
	80%{ opacity:1;-webkit-transform:scale(0.98);transform:scale(0.98); }
	100%{ opacity:1;-webkit-transform:scale(1); transform:scale(1); }
}
@keyframes a_game_item_show{
	0%{ opacity:0;-webkit-transform:scale(0.1);transform:scale(0.1); }
	5%{ opacity:1; -webkit-transform:scale(0.1);transform:scale(0.1); }
	60%{ opacity:1;-webkit-transform:scale(1.05);  transform:scale(1.05);}
	80%{ opacity:1;-webkit-transform:scale(0.98);transform:scale(0.98); }
	100%{ opacity:1;-webkit-transform:scale(1); transform:scale(1); }
}




@media (min-width: 480px) {
	.game_level,.game_score{font-size:18px;} 
	.game_score{ left:160px;}	
}

@media (min-width:640px) {
	.game_tips{bottom:10px; font-size:22px;}
	.fot_gold{height:60px;}
	.fot_gold li{ width:60px; height:60px;}
	.game_level,.game_score{font-size:18px; left:30px;}
	.game_score{ top:60px;}	
	.user_exit{width:40px; height:40px; right:20px; top:20px;}
	
	
}




